import React from 'react'
import { Menu, Icon, Layout } from 'antd'
import { Link } from 'react-router-dom';
import createHistory from 'history/createHashHistory';
import axios from "axios";
// import * as screenfull from 'screenfull'
import './header.less'
const history = createHistory();
const SubMenu = Menu.SubMenu
const { Header } = Layout

export default class Top extends React.Component {
    constructor(props) {

        super(props);

        this.state = {
            show:""
        }

    }


    changeMan=(item)=>{

        this.setState({
            show:item.item.props.children
        })
        this.props.getMenu(item.key);

    }
    clear = (item) => {

        if (item.key === 'logOut') {
            sessionStorage.clear();
            this.props.clear()
        }
    }

    render() {
        return (
            <Header style={{ background: '#fff'}}>
                <Icon
                    className="trigger"
                    type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.props.toggle}
                />
                <Menu mode="horizontal" className="logOut" onClick={this.clear}>
                    <SubMenu title={<span><Icon type="user" />{ this.props.userName }</span>} >
                        <Menu.Item key="logOut"><Link to="/login" >退出</Link></Menu.Item>
                    </SubMenu>
                </Menu>
                <Menu mode="horizontal" className="logOut" onClick={this.changeMan}>
                    <SubMenu title={this.state.show||this.props.authName}>
                        { this.props.roles.map( (ele,key)=>{

                            return  <Menu.Item key={ele.id}  title={key}>{ele.name}</Menu.Item>
                        })}
                    </SubMenu>
                </Menu>

            </Header>
        );
    }
}